<template>
    <div>
      <div class="form-label2">
        <label>选项</label>
        <p>（答案选中项为正确答案标示）</p>
      </div>
      <!-- 填空列表 -->
      <div class="common-choice">
        <div v-for="(item, index) in form.answer.blanks" :key="index" class="common-choice-item">
          <div class="item-label">第{{wordList[index]}}空:</div>
          <div class="edit-wrap">
            <editor v-model="item.content" :readOnly="readOnly" :min-height="180"/>
          </div>
        </div>
        <div class="choice-more" v-if="!readOnly">
          <i class="el-icon-plus" style="color: #409eff"></i><span @click="onAdd">添加选项</span>
        </div>
      </div>
      <div class="checkbox-area">
        <el-checkbox v-model="form.answer.sortable" :disabled="readOnly" :true-label="1" :false-label="0">
          支持答案互斥（以上多个空的答案，顺序打乱也判正确）
        </el-checkbox>
        <div class="tip tip-red">
          <p>提示：</p>
          <p>1、每空答案支持多种表述方式，答案设置时请用分号“;”隔开。如：水；H2O</p>
          <p>2、如果试题答案是数字，可以设置一个范围，两个数字之间必须有减号“-”。如1-9，学生填写1到9之间的数字都算正确（包括1和9）</p>
        </div>
        <el-checkbox v-model="form.answer.manual" :disabled="readOnly" :true-label="1" :false-label="0">
          将本题设为主观题
        </el-checkbox>
        <div class="tip tip-gray">设为主观题后需教师手动批阅</div>
        <el-checkbox v-model="form.answer.handWriting" :disabled="readOnly" :true-label="1" :false-label="0">
          将本题设为书写题
        </el-checkbox>
        <div class="tip tip-gray">设为书写题后需教师手动批阅，学生书写答案</div>
      </div>
    </div>
</template>
  
<script>
// 填空题
const defaultForm = JSON.stringify({
  answer: {
    blanks: [{ content: '' }],
    sortable: true,
    manual: false,
    handWriting: false
  }
});

export default {
  name: "Completion",
  props: {
    initialVals: {
      type: Object,
      default: () => ({}),
    },
    clean: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    validate: {  // 触发内层表单校验
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: JSON.parse(defaultForm),
      wordList: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
    }
  },
  watch: {
    initialVals: {
      handler(val) {
        if (Object.keys(val).length > 0) {
          const form = { ...this.form, ...val };
          if (val.answer) {
            const blanks = val.answer.blanks.map(item => ({ content: item }));
            form.answer.blanks = blanks;
          }
          this.form = form;
        }
      },
      immediate: true,
    },
    validate: {
      handler(val) {
        // TODO: 校验表单
        console.log(val);
        this.$emit('onValid', true);
      }
    },
    clean: {
      handler(val) {
        if (val) this.form = JSON.parse(defaultForm);
      }
    },
    form: {
      handler(val) {
        const form = JSON.parse(JSON.stringify(val));
        const blanks = val.answer.blanks.map(item => item.content);
        form.answer.blanks = blanks;
        this.$emit('change', form);
      },
      deep: true
    }
  },
  methods: {
    onAdd() {
      const answer = this.form.answer.blanks.slice();
      answer.push({ content: '' });
      this.form.answer.blanks = answer;
    }
  }
}
</script>
  
  <style lang="scss" scoped>
  @import './index.scss';
  </style>
    